import { defineComponent, reactive } from "vue";
import classes from "./index.module.less";

const ScreenNav = defineComponent({
  props: {
    type: {
      type: String,
      default: "1",
    },
  },
  name: "ScreenNav",
  setup() {
    const state = reactive({ bluegb: false });
    return () => (
      <div class={classes.nav}>
        <div
          class={[classes.item, classes.item1, state.bluegb && classes.bluebg]}
        >
          首页
        </div>
        <div
          onMouseenter={() => (state.bluegb = true)}
          onMouseleave={() => (state.bluegb = false)}
          class={[classes.item, classes.item2]}
        >
          工作台
        </div>
        <div class={classes.title}>湖北省中医院支出主题分析</div>
        <div
          onMouseenter={() => (state.bluegb = true)}
          onMouseleave={() => (state.bluegb = false)}
          class={[classes.item, classes.item3]}
        >
          统计报表
        </div>
      </div>
    );
  },
});

export default ScreenNav;
